<template>
  <view>
    <view class="wrapperwrapperwrapperwrapper">
    222
    </view>
  </view>
</template>
<script>
export default {
  name: 'ff-comments',
  props: {
    store: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      list: [
        {
          material_id: 2,
          title: '测试图片',
          show_type: 10,
          category_id: 1,
          image_id: [10327, 10121, 10120, 10118, 10119, 10117, 10116, 10115, 10114],
          video_id: null,
          content: '<p>哈哈哈哈哈<\/p>',
          sort: 100,
          status: 1,
          is_recommend: 1,
          image: [
            {
              file_id: 10327,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: 'mmexport1728199123842.jpg',
              file_path: '10001\/20241006\/8848e2ae0dca6c1b093cd39bed4f03bd.jpg',
              file_size: 108493,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-06 15:19:36',
              update_time: '2024-10-06 15:19:36',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241006\/8848e2ae0dca6c1b093cd39bed4f03bd.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241006\/8848e2ae0dca6c1b093cd39bed4f03bd.jpg',
            },
            {
              file_id: 10121,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_08.jpg',
              file_path: '10001\/20241001\/d32b7a7fc9d4435e1379a9cb365264ef.jpg',
              file_size: 529140,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:45',
              update_time: '2024-10-01 17:59:45',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/d32b7a7fc9d4435e1379a9cb365264ef.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/d32b7a7fc9d4435e1379a9cb365264ef.jpg',
            },
            {
              file_id: 10120,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_09.jpg',
              file_path: '10001\/20241001\/5779a89cd9da8e1a7d23c8378a9d618f.jpg',
              file_size: 536903,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:45',
              update_time: '2024-10-01 17:59:45',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/5779a89cd9da8e1a7d23c8378a9d618f.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/5779a89cd9da8e1a7d23c8378a9d618f.jpg',
            },
            {
              file_id: 10118,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_07.jpg',
              file_path: '10001\/20241001\/c4ccfdfae75c08692badacb793643339.jpg',
              file_size: 307157,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:45',
              update_time: '2024-10-01 17:59:45',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/c4ccfdfae75c08692badacb793643339.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/c4ccfdfae75c08692badacb793643339.jpg',
            },
            {
              file_id: 10119,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_06.jpg',
              file_path: '10001\/20241001\/e5703c98144cd07fe69e7118168a08e7.jpg',
              file_size: 308852,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:45',
              update_time: '2024-10-01 17:59:45',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/e5703c98144cd07fe69e7118168a08e7.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/e5703c98144cd07fe69e7118168a08e7.jpg',
            },
            {
              file_id: 10117,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_05.jpg',
              file_path: '10001\/20241001\/85036accee4eb31eb13133aeee3e89bf.jpg',
              file_size: 734325,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:35',
              update_time: '2024-10-01 17:59:35',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/85036accee4eb31eb13133aeee3e89bf.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/85036accee4eb31eb13133aeee3e89bf.jpg',
            },
            {
              file_id: 10116,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_02.jpg',
              file_path: '10001\/20241001\/93a8b5abe3f6e5c9a7105edd92cc2b86.jpg',
              file_size: 723777,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:35',
              update_time: '2024-10-01 17:59:35',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/93a8b5abe3f6e5c9a7105edd92cc2b86.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/93a8b5abe3f6e5c9a7105edd92cc2b86.jpg',
            },
            {
              file_id: 10115,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_04.jpg',
              file_path: '10001\/20241001\/2be0bf6898b0571f1118f55e8da28494.jpg',
              file_size: 432381,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:35',
              update_time: '2024-10-01 17:59:35',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/2be0bf6898b0571f1118f55e8da28494.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/2be0bf6898b0571f1118f55e8da28494.jpg',
            },
            {
              file_id: 10114,
              group_id: 0,
              channel: 10,
              storage: 'local',
              domain: '',
              file_type: 10,
              file_name: '洁颜蜜_01.jpg',
              file_path: '10001\/20241001\/f7b9e30387a188d1e88519337b999571.jpg',
              file_size: 385912,
              file_ext: 'jpg',
              cover: '',
              uploader_id: 0,
              is_recycle: 0,
              is_delete: 0,
              store_id: 10001,
              create_time: '2024-10-01 17:59:35',
              update_time: '2024-10-01 17:59:35',
              preview_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/f7b9e30387a188d1e88519337b999571.jpg',
              external_url:
                'https:\/\/ceshi.chenguangjinpu.cn\/uploads\/10001\/20241001\/f7b9e30387a188d1e88519337b999571.jpg',
            },
          ],
          video: [],
          category: {
            category_id: 1,
            name: '品牌故事',
            status: 1,
            sort: 100,
          },
          show_views: 100,
        },
      ],
    }
  },
  created() {},
  methods: {}, 
}
</script>
<style lang="less" scoped>
.wrapper {
  background: #ffffff;
  margin: 10px 5px;
  padding: 0px;
  // padding-bottom: 100px;
  // margin-bottom: 100px;

  // width: 100%;
  .label {
    padding: 10px 0px 0px 10px;
    color: #888888;
    font-size: 14px;
    font-weight: 600;
  }
}

.item {
  display: flex;
  margin: 10px 5px;
  padding: 5px;
  // border-radius: 10px;
  border-bottom: 1px solid #eeeeee;
  height: auto;

  .header {
    padding-right: 8px;

    .avatar {
      height: 45px;
      width: 45px;
      border-radius: 5px;
    }
  }

  .comment {
    // padding:0px 10px;
    width: calc(100% - 55px);

    .nickname {
      font-weight: 600;
      padding-bottom: 8px;
      display: flex;
      justify-content: space-between;

      view {
        &:last-child {
          font-weight: 500;
          color: #888888;
        }
      }
    }

    .content {
      line-height: 1.5;
      font-size: 15px;
      color: #606266;
      line-height: 1.8;
      text-align: left;
    }

    .images {
      padding-top: 5px;
    }

    .time {
      font-size: 12px;
      color: #888888;
      display: flex;
      justify-content: space-between;
      // padding-bottom: 5px;
      margin-right: 15px;
    }
  }
}

.image-box {
  // padding-bottom: 10px;

  .img-list {
    // padding: 16rpx 0;
    // display: flex;
    // flex-wrap: wrap;
    margin-top: 16rpx;

    .img-item {
      display: inline-block;
      width: 180rpx;
      height: 180rpx;

      &:only-child {
        width: 400rpx;
        height: 380rpx;
        border-radius: 20rpx;
      }

      &:nth-child(3n + 1):nth-last-child(2),
      &:nth-child(3n + 2):last-child {
        width: 280rpx;
        height: 300rpx;
      }

      &:nth-child(3n + 2) {
        margin: 0 12rpx;
      }

      &:nth-child(n + 4) {
        margin-top: 12rpx;
      }

      &:first-child {
        border-top-left-radius: 20rpx;
      }

      &:last-child {
        margin-right: 0;
        border-bottom-right-radius: 20rpx;
      }

      &:nth-child(3n + 1) {
        &:last-child,
        &:nth-last-child(2),
        &:nth-last-child(3) {
          border-bottom-left-radius: 20rpx;
        }
      }

      &:nth-child(2):last-child,
      &:nth-child(3) {
        border-top-right-radius: 20rpx;
      }

      &:nth-child(2):nth-last-child(3) {
        margin-right: 40rpx;
      }

      &:nth-child(2):nth-last-child(3) {
        border-top-right-radius: 20rpx;
      }

      &:nth-child(3):nth-last-child(2) {
        margin-top: 12rpx;
        margin-right: 12rpx;
        border-radius: 0 0 0 20rpx;
      }

      &:nth-child(4):last-child {
        border-radius: 0 0 20rpx 0;
      }
    }

    & > view {
      width: 100%;
    }
  }
}
</style>
